<!--
  * 商品销售明细
  *
-->
<template>
  <a-form class="smart-margin-bottom10">
    <a-row :gutter="[8, 10]">
      <a-col :span="5.5">
        <a-form-item label="订单日期" class="smart-margin-bottom0">
          <custom-range-picker v-model:value="queryForm.create_time" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item label="出库仓" class="smart-margin-bottom0">
          <Select name="Warehouse" v-model:value="queryForm.warehouse_id" placeholder="请选择" @input-enter="onSearch" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item label="门店" class="smart-margin-bottom0">
          <Select name="Store" v-model:value="queryForm.store_id" placeholder="请选择" @input-enter="onSearch" />
        </a-form-item>
      </a-col>
      <a-col :span="5">
        <a-button-group>
          <a-button type="primary" html-type="submit" @click="onSearch" v-privilege="'goods:query'">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery" v-privilege="'goods:query'">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-button-group>
      </a-col>
    </a-row>
  </a-form>
  <a-table :loading="tableLoading" :dataSource="tableData" :columns="columns" :scroll="{ x: 'max-content' }" :pagination="false" rowKey="id" size="small" bordered>
    <template #bodyCell="{ text, column }">
      <template v-if="column.dataIndex === 'status'">
        <span>{{ getDescByValue('PROGRESS_STATUS_ENUM', text) }}</span>
      </template>
    </template>
  </a-table>
  <div class="smart-query-table-page">
    <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS" :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit" :total="total" @change="queryData" @showSizeChange="queryData" :show-total="() => `共${total}条`" />
  </div>
</template>
<script setup lang="ts">
import { goodsReportApi } from '@/api/business/report/report-api'
import { PAGE_SIZE_OPTIONS, DEFAULT_TIME_RANGE } from '@/constants/system/common-const'
import { ORDER_STATRS_ENUM } from '@/constants/business/orders-const'
import { useQuery } from '@/hooks/web/use-query-hook'
import { useEnums } from '@/hooks/plugins/useEnums'
import Select from '@/components/business/select/index.vue'
import CustomRangePicker from '@/components/business/custom-range-picker/index.vue'
const { getDescByValue } = useEnums()
const props = defineProps({
  row: {
    type: Object,
    default: () => ({})
  }
})

const columns = reactive([
  {
    title: '商品名称',
    dataIndex: 'goods_name'
  },
  {
    title: '订单编号',
    dataIndex: 'no'
  },
  {
    title: '门店名称',
    dataIndex: 'store_name'
  },
  {
    title: '出库仓',
    dataIndex: 'warehouse_name'
  },
  {
    title: '销售数量',
    dataIndex: 'order_num'
  },
  {
    title: '商品金额',
    dataIndex: 'order_detail_total_price'
  },
  {
    title: '商品备注',
    dataIndex: ''
  },
  {
    title: '业务员',
    dataIndex: 'salesman_name'
  },
  {
    title: '结算状态',
    dataIndex: 'status'
  },
  {
    title: '结算金额',
    dataIndex: 'deduction_amount'
  },
  {
    title: '订单日期',
    dataIndex: 'create_time'
  },
  {
    title: '结算日期',
    dataIndex: 'deduction_time'
  },
  {
    title: '签收日期',
    dataIndex: 'sign_time'
  }
])
// --------------------------- 查询 ---------------------------
const { queryForm, tableData, tableLoading, total, resetQuery, onSearch, queryData, deleteData } = useQuery({
  fetchDataApi: async ({ filter, op, ...params }) => {
    const data = {
      ...params,
      ...filter
    }
    const res = await goodsReportApi.querySalesmanGoodsDetail(data)
    return {
      list: res.data.data,
      total: res.data.total
    }
  },
  queryFormFilter: {
    goods_id: props.row.goods_id,
    salesman_id: props.row.salesman_id,
    order_type: ORDER_STATRS_ENUM.CASH.value,
    create_time: DEFAULT_TIME_RANGE.value,
    warehouse_id: undefined,
    store_id: undefined
  },
  queryFormOp: {}
})
watch(
  () => props.row,
  (e) => {
    if (e) {
      queryForm.value = { ...queryForm.value, ...e }
      queryData()
    }
  },
  { immediate: true, deep: true }
)
</script>

<style scoped lang="less">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.button-style {
  margin: 0 10px;
}
</style>
